<template>
<el-container>
  <el-header>
     <el-row :gutter="20"  style="display: flex;width:100%">
        <el-col :span="4" style="display: flex;">
            <div class="grid-content bg-purple" style="display: flex;align-items: center;justify-content: flex-end;">
                <img src="../assets/logo2.png" style="width:100%;height:auto;">
            </div>
        </el-col>
        <el-col :span="8">
            <div class="grid-content bg-purple logo" style="font-size:25px">
               <!-- WN综合管理系统 -->
            </div>
        </el-col>
        <el-col :span="12" style="display: flex;justify-content: flex-end; align-items: center;">
            <div class="grid-content bg-purple">
                <el-row :gutter="20" style="display: flex;justify-content: flex-end;">
                    <el-col :span="20" style="display: flex;justify-content: flex-end;">
                        <div class="grid-content bg-purple register">
                            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                             <el-button type="text" v-on:click="signOut" >退出</el-button>
                        </div>
                    </el-col>               
                </el-row>
            </div>
        </el-col>
    </el-row>  

  </el-header>
  <el-container>
    <el-aside width="200px">
        <el-row class="tac">
            <el-col :span="24">
                <el-menu
                :router="true"
                class="el-menu-vertical-demo"
                unique-opened
                @open="handleOpen"
                @close="handleClose"
                :default-active="$router.path"
                >
                <el-menu-item index="/index/article">
                    <i class="el-icon-reading"></i>
                    <span slot="title">文章管理</span>
                </el-menu-item>
                <el-menu-item index="/index/classify">
                    <i class="el-icon-coin"></i>
                    <span slot="title">分类管理</span>
                </el-menu-item>
                <el-menu-item index="/index/tag">
                    <i class="el-icon-set-up"></i>
                    <span slot="title">标签管理</span>
                </el-menu-item>
                <el-menu-item index="/index/comment">
                    <i class="el-icon-chat-square"></i>
                    <span slot="title">评论管理</span>
                </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
    </el-aside>
    <el-container>
      <el-main>
           <router-view></router-view>
      </el-main>
      <el-footer>
          <span>个人综合平台</span>
      </el-footer>
    </el-container>
  </el-container>
</el-container>
    
</template>
<script>
export default{
    name:'Index',
    data(){
        return{
        }
    },
    methods: {
        signOut:function(){
            this.$router.push({path:'/login'})
        },
         handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>
<style leng='scss'>
html,body,#homeBox,#app{
    height:100%;
    overflow: hidden;
}
#homeBox{
    /* border:1px solid red; */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #D3DCE6; */
}
.el-container{
    height:100%;
    /* border: 1px solid #B3C0D1; */
}
.el-row{
    width:100%;
}
.el-header {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 60px;
    border-bottom:1px solid #EBEEF5;
    display: flex;
}
.el-aside{
    border-right: solid 1px #EBEEF5;
    /* border-top:solid 1px #EBEEF5; */
}
.el-main{
    background-color: #fff;
    color: #333;
    /* text-align: center; */
    /* line-height: 160px; */
    padding:0px;
    overflow: hidden;
}
.el-footer {
    background-color: #fff;
    font-size: 12px;
    color: #EBEEF5;
    display: flex;
    align-items: flex-end;
    height: 30px;
    line-height: 30px;
}
.el-menu{
    border:0px solid #EBEEF5;
}
.logo{
    display: flex;
    justify-content: end;
}
.register{
    display: flex;
    justify-content: flex-end;
}


</style>